﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Menu - Icons</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../../../css/samples.css" />
    <link rel="stylesheet" href="../../../css/integralui.menu.css" />
    <link rel="stylesheet" href="../../../css/themes/theme-flat-blue.css" />
    <script type="text/javascript" src="../../../external/angular.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.menu.min.js"></script>
    <script type="text/javascript">
        angular
            .module("appModule", ["integralui"])
            .controller("appCtrl", ["$scope", "$timeout", "IntegralUIMenuService", function($scope, $timeout, $menuService){
                $scope.menuName = "menuSample";
                $scope.defaultIcon = 'icons-medium empty';
                $scope.showIcons = true;
                $scope.data = [];

                var flatList = [
                    { "id": 1, "text": "File", "icon": "" },
                    { "id": 11, "pid": 1, "text": "New", "icon": "icons-medium new-document" },
                    { "id": 111, "pid": 11, "text": "Project", "icon": "" },
                    { "id": 112, "pid": 11, "text": "Window", "icon": "" },
                    { "id": 12, "pid": 1, "text": "Open" },
                    { "id": 13, "pid": 1, "text": "Save As...", "icon": "icons-medium save" },
                    { "id": 14, "pid": 1, "text": "Save All" },
                    { "id": 15, "pid": 1, "type": "separator" },
                    { "id": 16, "pid": 1, "text": "Page Setup" },
                    { "id": 17, "pid": 1, "text": "Print", "icon": "icons-medium print" },
                    { "id": 18, "pid": 1, "type": "separator" },
                    { "id": 19, "pid": 1, "text": "Exit" },
                    { "id": 2, "text": "Edit", "icon": "" },
                    { "id": 21, "pid": 2, "text": "Undo" },
                    { "id": 22, "pid": 2, "text": "Redo" },
                    { "id": 23, "pid": 2, "type": "separator" },
                    { "id": 24, "pid": 2, "text": "Cut" },
                    { "id": 25, "pid": 2, "text": "Copy", "icon": "icons-medium copy" },
                    { "id": 26, "pid": 2, "text": "Paste" },
                    { "id": 27, "pid": 2, "text": "Delete", "icon": "icons-medium delete-document" },
                    { "id": 3, "text": "View", "icon": "" },
                    { "id": 31, "pid": 3, "text": "Print Layout" },
                    { "id": 32, "pid": 3, "text": "Zoom", "icon": "icons-medium zoom" },
                    { "id": 321, "pid": 32, "text": "Zoom In", "icon": "icons-medium zoom-in" },
                    { "id": 322, "pid": 32, "text": "Zoom Out", "icon": "icons-medium zoom-out" },
                    { "id": 323, "pid": 32, "type": "separator" },
                    { "id": 324, "pid": 32, "text": "Restore" },
                    { "id": 33, "pid": 3, "type": "separator" },
                    { "id": 34, "pid": 3, "text": "Full Screen" },
                    { "id": 4, "text": "Help", "icon": "" },
                    { "id": 41, "pid": 4, "text": "Search", "icon": "" },
                    { "id": 42, "pid": 4, "text": "Documents", "icon": "" },
                    { "id": 43, "pid": 4, "type": "separator", "icon": "" },
                    { "id": 44, "pid": 4, "text": "About", "icon": "" }
                ];

                var initTimer = $timeout(function(){
                    $menuService.loadData($scope.menuName, flatList);
                    $menuService.updateLayout($scope.menuName);
                }, 1);
				
				$scope.toggleIcons = function(){
					$scope.showIcons = !$scope.showIcons;
				}
			}]);
    </script>
    <style type="text/css">
		.iui-menu
		{
			width: 500px;
		}
        .icons-medium
        {
            margin: 0 1px;
        }
       .iui-menu-item-root-content
        {
            width: 50px;
            text-align: center;
        }
        .iui-menu-item
        {
            width: 125px;
        }
        .iui-menu-item-content
        {
            margin: 0 7px;
        }
    </style>
</head>
<body>
	<div class="header">
        <div class="header-content">
		    <h1><span style="color:#c60d0d">IntegralUI</span> Studio <span style="font-size:0.75em; font-style:italic">for Web</span></h1>
        </div>
        <hr class="head-separator" />
    </div>
    <div class="content" ng-app="appModule">
        <div class="feature" ng-controller="appCtrl">
	        <h2 class="feature-title">Menu / Icons</h2>
	        <div class="feature-content">
                <iui-menu name="{{menuName}}" items="data" item-icon="defaultIcon" show-icons="showIcons" open-on-hover="true"></iui-menu>
                <div style="float:right;width: 100px; white-space:nowrap;margin-top:5px">
					<label><input type="checkbox" ng-click="toggleIcons()" checked="checked" />Show Icons</label><br />
                </div>
                <div style="clear: both; height: 100px;"></div>
	            <div class="feature-help">
	                <p>This sample shows how to show/hide icons in Menu directive. By clicking on check box on the right, you can change the built-in property:
	                    <ul class="feature-points">
	                        <li><span style="color:#c60d0d">showIcons</span> - determines whether menu items are displayed with an icon</li>
	                    </ul>
	                </p>
	                <p><span class="initial-space"></span>By default whenever root menu item is hovered, the submenu appear when menu is clicked. By setting the <span style="color:#c60d0d">openOnHover</span> property to <span style="color:#c60d0d">true</span>, the submenus will pop-up when mouse cursor hovers over the root menu longer than 500ms.</p>
	            </div>
            </div>
        </div>
    </div>
</body>
</html>
